New diagram types: flowchart, mindmap & chart (+ card content and shapes)#12
Merged
Conversation
Two self-contained additions to the node/card vocabulary, both emitted only when present so every existing document stays byte-identical. Card content blocks: - `items:` (bulleted list) and `body:` (wrapped paragraph) on cards, defaulted in the model (Schema/Validate/ModelJson) and mirrored in the authoring NodeBuilder (Item/Items/Body). - StyleGeometry gains ItemLine/ItemGap/BodyLine (optional-with-default, mirroring the class-compartment pitch); CardSizer measures the new blocks. New node shapes (flowchart groundwork): - Diamond & Parallelogram NodeShapes: Artwork polygon paths + sketch wobble + brutalist offset-polygon shadow; SvgRenderer emit with inscribed-box text wrap. - Router support: diamonds are point-anchored to their vertices (never spread or straightened off); parallelogram left/right anchors nudge onto the slanted face by skew/2. Zero-nudge / non-diamond paths are byte-identical. Tests: CardItemsBodySizingTests, DiamondParallelogramTests. Full suite green (434).
Add two new root `type:`s on the shared layered engine: - `flowchart` — process/decision graphs (process cards, decision diamonds, I/O parallelograms, start/end terminators) joined by labelled `links:`, with `"[*]"` start/end pseudo-steps. - `mindmap` — radial topic trees with items and body copy. Both ship a model builder and a fluent authoring builder, and reuse the existing measure/route/svg/animate stages. Shared engine work supports both: diamond/parallelogram shapes and loop-back routing (EdgePainter, OrthogonalRouter, SvgRenderer, CardSizer), plus token/schema/enum plumbing. Includes guide + reference docs, playground examples for mindmap, corpus diagrams, and model/SVG goldens; clean-line fuzzer coverage extended to the new shapes. Full suite green (505 tests).
Add a Flowchart group to the docs playground's Examples picker: - Two example diagrams — "Deploy gate" (TB, decisions + rollback loop) and "Ticket triage" (LR, routed by urgency) — under wwwroot/examples. - Register the group in PlaygroundIsland's ExampleGroups (glyph, pill tag). - Teal `data-type="flowchart"` pill colour (light + dark) in BrandStyling. Also add the repo's first Claude skill, add-playground-example, documenting the three-file process (author YAML, register in the picker, add the pill colour) so future playground additions are mechanical.
Add a chart root `type:` that renders a small, static data chart on its own painter, bypassing the node/edge layout+route+animate pipeline. Charts share the meta/theming shell with every other diagram but carry no nodes, edges, or flow. - Model: ChartModel/ChartSeries/ChartPoint schema + ChartBuilder parser, wired through DiagramType.Chart, Tokens, Defaults, and Validate. Which series member carries data depends on kind (bar/pie/donut → one magnitude, line → a value list, scatter → x/y points). - Svg: ChartPainter draws bar/line/pie/donut/scatter plus an optional legend (top/right/bottom/none, optional value annotations) and pie/donut centre labels; non-finite data collapses to 0 so no bad coordinate reaches the SVG. ChartColors derives every series colour from `--beck-primary` via the chosen palette (analogous/monochromatic/complementary/sequential) as color-mix/relative-colour expressions, so a chart re-tints with the host palette and flips light↔dark like the rest of Beck. A series may pin its own `color:`. - Authoring: ChartDiagramBuilder fluent API + ChartKind/ChartPalette/ LegendPlacement enums and their `Tokens.Of` mappings. - Docs: chart guide, yaml reference, for-ai.llms.md; five wwwroot examples and four guide snippets; playground picker entry + pill colour. - Tests: ChartTests and ChartQuality clean-line coverage. Full suite green (533 tests). Also gitignore `*.snupkg` and `/dist/` local pack output, and add oracle renders for the flowchart/mindmap types.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Bundles all work not yet in
main— four commits that extend Beck's vocabulary with three new roottype:s and the node/shape groundwork they stand on.What's here
feat(nodes)— card content + new shapes (7e25278)items:(bulleted list) andbody:(wrapped paragraph) on cards, defaulted in the model and mirrored in the authoringNodeBuilder.NodeShapes (artwork paths, sketch wobble, brutalist shadow) with rank-aware router anchoring (diamonds point-anchored to vertices; parallelogram anchors nudged onto the slanted face). Zero-nudge paths stay byte-identical.feat— flowchart & mindmap types (4a16eb4)flowchart— process/decision graphs (process cards, decision diamonds, I/O parallelograms, start/end terminators) joined by labelledlinks:, with"[*]"pseudo-steps.mindmap— radial topic trees with items and body copy.feat(playground)— flowchart examples + skill (4e1fc3e)add-playground-example) documenting the three-file wiring.feat(chart)—type: chartdata charts (10d863d)ChartPainterthat bypasses the node/edge layout+route+animate pipeline.--beck-primaryvia a chosen palette (analogous / monochromatic / complementary / sequential) ascolor-mix/relative-colour expressions, so charts re-tint with the host palette and flip light↔dark like every other diagram. A series may pin its owncolor:.for-ai.llms.md), five wwwroot examples, and playground entry.Invariants held
--beck-*tokens /color-mixexpressions — never resolved literals — so host-palette adoption and light↔dark both keep working.Housekeeping
.gitignore: added*.snupkg,/dist/, and*.user.Testing
dotnet test tests/Beck.Tests/Beck.Tests.csproj— 533 passed, 0 failed.🤖 Generated with Claude Code